<template>
  <div style="width: 100%;height: 100%;">
    <div style="width: 80%;margin-left: 2%;">
    <Form :model="formData">
          <FormItem label="标题" label-position="top">
            <Input
              type="textarea"
              v-model="ProductTitle"
              :rows="1"
              placeholder="这是帖子的标题"
            />
          </FormItem>
        </Form>
        <div>
          <el-upload
            :action="useOss ? dataObj.host : minioUploadUrl"
            :data="useOss ? dataObj : null"
            list-type="picture-card"
            :file-list="fileList"
            :before-upload="beforeUpload"
            :on-remove="handleRemove"
            :on-success="handleUploadSuccess"
            :on-preview="handlePreview"
            :limit="maxCount"
            :on-exceed="handleExceed"
          >
            <i class="el-icon-plus"></i>
          </el-upload>
          <el-dialog visible.sync="dialogVisible">
            <img width="100%" :src="dialogImageUrl" alt="" />
          </el-dialog>
        </div>
        <Form :model="formData">
          <FormItem label="定价" label-position="top">
            <Input
              type="textarea"
              v-model="productMoney"
              :rows="1"
              placeholder="请输入你预想的定价"
            />
          </FormItem>
        </Form>
        <!-- <Select v-model="typeModel" style="width: 200px">
          <Option
            v-for="item in typeList"
            :value="item.value"
            :key="item.value"
            placeholder="请选择你产品的类型"
            >{{ item.label }}</Option
          >
        </Select> -->
        <Form :model="formData">
          <FormItem label="描述" label-position="top">
            <Input
              type="textarea"
              v-model="productMessage"
              :rows="4"
              placeholder="请输入一段话进行描述"
            />
          </FormItem>
        </Form>
        <div class="demo-drawer-footer">
          <Button style="margin-right: 8px" @click="value2 = false"
            >取消</Button
          >
          <Button type="primary" @click="updataProduct()">发布</Button>
        </div>
      </div>
  </div>
</template>
<script>
import axios from "axios";
export default {
  name: "multiUpload",
  props: {
    value: {
      type: Array,
      default: () => {
        return [];
      },
    },
    maxCount: {
      type: Number,
      default: 5,
    },
  },
  data() {
    return {
      dataObj: {
        policy: "",
        signature: "",
        key: "",
        ossaccessKeyId: "",
        dir: "",
        host: "",
      },
      dialogVisible: false,
      dialogImageUrl: null,
      useOss: true, //使用oss->true;使用MinIO->false
      minioUploadUrl: "http://localhost:8081/minio/upload",
      centerDialogVisible: false,
      user: {
        name: "",
        userfalseName: "",
        sex: "",
        phone: "",
        headImg: "",
      },
      TzMessage: "", //帖子的详细信息
      TzTitle: "", //帖子的标题
      TzImgUrl: "", //帖子图片路径
      productImgUrl: "", //产品的图片路径
      productMessage: "", //产品的详细信息
      productMoney: "", //产品的价格
      productType: "", //产品的种类
      ProductTitle: "", //产品的标题
      imgInfosBOs:[],//上传多张图片的表
      typeList: [
        {
          value: "0",
          label: "女装/女包/女鞋",
        },
        {
          value: "1",
          label: "美妆/饰品/洗护",
        },
        {
          value: "2",
          label: "男装/背包/男鞋",
        },
        {
          value: "3",
          label: "手机/数码/礼物",
        },
        {
          value: "4",
          label: "食品/生鲜/进口",
        },
        {
          value: "5",
          label: "书本/其他/服务",
        },
        {
          value: "6",
          label: "家装/电器/药品",
        },
      ],
      typeModel: "",
      imageUrl: "",
      uploadUrl: "src/upLoadImg",
      isLoggedIn: false, //用户是否登录
      count: 0, //倒计时 计数器
      LoginOrRegster: true,
      userName: "", //用户账号
      passWord: "", //账号密码
      value1: false,
      value2: false,
      styles: {
        height: "calc(100% - 55px)",
        overflow: "auto",
        paddingBottom: "53px",
        position: "static",
      },
      formData: {
        name: "",
        url: "",
        owner: "",
        type: "",
        approver: "",
        date: "",
        desc: "",
      },
    };
  },
  watch: {
    isLoggedIn(login) {
      localStorage.setItem("isLoggedIn", login);
    },
  },
  computed: {
    fileList() {
      let fileList = [];
      for (let i = 0; i < this.value.length; i++) {
        fileList.push({ url: this.value[i] });
      }
      return fileList;
    },
  },
  mounted() {},
  created() {
    const savedUser = localStorage.getItem("user");
    if (savedUser) {
      this.user = JSON.parse(savedUser);
      this.isLoggedIn = true;
    }
    const isLoggedIn = localStorage.getItem("isLoggedIn");
    if (isLoggedIn) {
      this.isLoggedIn = true;
    }
  },
  methods: {
    //图片上传逻辑
    emitInput(fileList) {
      let value = [];
      for (let i = 0; i < fileList.length; i++) {
        value.push(fileList[i].url);
      }
      this.$emit("input", value);
    },
    handleRemove(file, fileList) {
      console.log(file);
      this.emitInput(fileList);
    },
    handlePreview(file) {
      this.dialogVisible = true;
      this.dialogImageUrl = file.url;
      console.log(this.dialogImageUrl);
    },
    beforeUpload(file) {
      console.log(file);
      if (!this.useOss) {
        //不使用oss不需要获取策略
        return true;
      }
      return new Promise((resolve, reject) => {
        let _self = this;
        console.log(1111);
        axios
          .get("http://localhost:8081/aliyun/oss/policy")
          .then((response) => {
            _self.dataObj.policy = response.data.data.policy;
            _self.dataObj.signature = response.data.data.signature;
            _self.dataObj.ossaccessKeyId = response.data.data.accessKeyId;
            _self.dataObj.key = response.data.data.dir + "/${filename}";
            _self.dataObj.dir = response.data.data.dir;
            _self.dataObj.host = response.data.data.host;
            resolve(true);
          })
          .catch((err) => {
            console.log(err);
            reject(false);
          });
      });
    },
    handleUploadSuccess(res, file) {
      console.log("上传成功");
      let url = this.dataObj.host + "/" + this.dataObj.dir + "/" + file.name;
      console.log(url);
      this.productImgUrl = url;
      let productImgUrlitem = {
            imgType: "3",
            relateId: "",
            imgUrl:this.productImgUrl,
            remarks:""
      }
      this.imgInfosBOs.push(productImgUrlitem)
      console.log(this.imgInfosBOs);
      console.log(productImgUrlitem);
      if (!this.useOss) {
        console.log(res.data, 11111);
        //不使用oss直接获取图片路径
        url = res.data.url;
        console.log(url);
      }
      this.fileList.push({ name: file.name, url: url });
      this.emitInput(this.fileList);
    },
    handleExceed(files, fileList) {
      console.log(files);
      console.log(fileList);
      this.$message({
        message: "最多只能上传" + this.maxCount + "张图片",
        type: "warning",
        duration: 1000,
      });
    },
    //登录页面
    goToNewPage() {
      axios
        .post(
          "http://localhost:8081/salvage/students/login",
          // axios.post('http://localhost:8081/salvage/students/register',
          {
            username: this.userName,
            password: this.passWord,
          }
        )
        .then((response) => {
          if (response.data.code == "00000") {
            console.log(response.data);
            this.isLoggedIn = true;
            //将custLogin上传全局变量
            let id = response.data.data.studentId;
            this.$store.commit("getstudentId", id); //将账号上传到全局
            console.log(this.$store.state.id);
            this.username = this.userName;
            this.$store.commit("getUserName", this.username); //将账号上传到全局
            this.user.name = response.data.data.name;
            this.user.userfalseName = response.data.data.nickname;
            this.$store.commit("getnickname", this.user.userfalseName); //将昵称上传到全局
            console.log(this.$store.state.nickname);
            this.user.sex = response.data.data.sex;
            this.user.phone = response.data.data.phoneNum;
            this.$store.commit("getphone", this.user.phone); //将账号上传到全局
            console.log(this.$store.state.phone);
            localStorage.setItem("user", JSON.stringify(this.user));
          } else {
            this.$Message.info(response.data.message);
          }
        });
    },
    changeLogin() {
      this.isLoggedIn = false;
    },
    changeMessage() {
      console.log(this.$store.state.username);
      axios
        .post("http://localhost:8081/salvage/students/updateStudentInfo", {
        //   studentId:this.$store.state.id,
          username: this.$store.state.username,
          name: this.user.name,
          nickname: this.user.userfalseName,
          sex: this.user.sex,
          phoneNum: this.user.phone,
          headUrl: this.user.headImg, //头像路径
        })
        .then((response) => {
          if (response.data.code == "00000") {
            this.$Message.info(response.data.message);
          } else {
            this.$Message.info(response.data.message);
          }
        });
    },
    //上传商品
    updataProduct() {
      this.value2 = false;
      axios.post("http://localhost:8081/salvage/products/addProduct", {
        studentId:this.user.studentId, //用户唯一标识
        title: this.ProductTitle, //产品的标题
        description: this.productMessage, //产品的内容
        price: this.productMoney, //产品的价格
        productType: 0, //产品的类型（0，1，2，3，4，5，6）
        status: 1, //商品是否上架（0代表下架，1代表上架）
        adminStatus:2,//0审核中，1审核通过
        imgInfosBOs: this.imgInfosBOs,
      }).then((response) => {
          if (response.data.code == "00000") {
            this.$Message.info("上传成功,等待管理员进行审核")
            this.$router.push({
              name:'theHome'
            })
          }
        });
    },
    //打开注册页面
    RegisterAccount() {
      this.LoginOrRegster = false;
    },
    //注册用户页面
    goToRegister() {
      axios
        .post("http://localhost:8081/salvage/students/register", {
          username: this.userName,
          password: this.passWord,
        })
        .then((response) => {
          if (response.data.code == "00000") {
            this.$Message.info("正在注册中，注册完成自动返回登录页面");
            this.gotoLogin();
          } else {
            this.$Message.info("该用户已存在");
          }
        });
    },
    //返回登录页面
    gotoLogin() {
      this.LoginOrRegster = true;
    },
  },
};
</script>


<style scoped>
.login-bg {
  right: 0;
  left: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  position: fixed;
  display: flex;
  width: 100%;
  height: 800px;
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: cover;
  overflow: hidden;
  background-image: url(../assets/bgimg.png);
  background-size: 100% 100%;
}
.login-bg-one {
  right: 0;
  left: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  position: fixed;
  display: flex;
  width: 100%;
  height: 800px;
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: cover;
  overflow: hidden;
  /* background-image: url(../assets/bgimg.png); */
  background-size: 100% 100%;
}
.custLeft {
  width: 40%;
  height: 100%;
  /* position: fixed; */
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: cover;
  overflow: hidden;
  margin-left: 10%;
  /* background-image: url(../assets/hua.png); */
}
/* .custRight{
    width: 60%;
    height: 100%;
    display: flex;
    background: #d2d2d2;
    justify-content: center;
    align-items: center;
} */
.login-right-bg {
  position: fixed;
  top: 50%;
  margin-top: -300px;
  right: 0;
  width: 420px;
  min-width: 330px;
  min-height: 200px;
  /* background: #fff; */
  z-index: 100;
}
.login-right-main {
  margin: 143px 20px 0 20px;
  padding: 10px 20px;
  width: 340px;
  height: 245px;
  background: #fff;
  border-radius: 4px;
  overflow: hidden;
  z-index: 100;
}
.login-right-top {
  line-height: 55px;
  text-align: center;
  font-size: 18px;
  color: #333;
  font-weight: 500;
}
.login-con {
  position: relative;
  margin-top: 10px;
}
.login-con-nums {
  height: 59px;
  border-bottom: 1px solid #dedede;
}
.icon-account {
  position: absolute;
  display: block;
}
.form-control {
  margin-left: 40px;
  width: 65%;
  height: 100%;
  line-height: 59px;
  outline: none;
  color: #333333;
  font-size: 14px;
  border: none;
}
.login-con-nums {
  height: 59px;
  border-bottom: 1px solid #dedede;
}
.icon-password {
  position: absolute;
  display: block;
}
.remember {
  position: relative;
  margin-top: 10px;
  padding-left: 11px;
  height: 20px;
  line-height: 20px;
  color: #666;
  font-size: 14px;
}
.remember-me {
  padding-left: 20px;
  cursor: pointer;
}
.lost-pwd {
  float: right;
  cursor: pointer;
}
.login-btn {
  margin: 20px 20px 0 20px;
  height: 46px;
  text-align: center;
  line-height: 46px;
  color: #fff;
  font-size: 16px;
  border-radius: 4px;
  background: #09adf1;
  cursor: pointer;
  width: 340px;
}
.custMessage {
  position: fixed;
  top: 50%;
  margin-top: -300px;
  right: 0;
  width: 420px;
  min-width: 330px;
  min-height: 200px;
  background: #a7a3a3;
  z-index: 100;
}
.headContain {
  width: 100%;
  /* height: 240px; */
  display: flex;
  /* background: #000; */
  justify-content: center;
  align-items: center;
  margin-top: 10px;
}
.headContain-one {
  width: 100%;
  /* height: 240px; */
  display: flex;
  margin-left: 10%;
  margin-top: 10px;
  /* background: #000; */
  /* justify-content: center;
    align-items: center; */
}
.headContain-two {
  width: 100%;
  height: 493px;
  display: flex;
  background: #ffffff;
  justify-content: center;
  /* align-items: center; */
  border-radius: 15px;
  margin-top: 10px;
}
</style>
